<template>
  <view class="container" @touchmove.stop.prevent="() => {}">
    <view class="u-nav-slot" slot="left" @click="left">
      <u-icon name="arrow-left" color="#000000" size="24" :bold="true"></u-icon>
    </view>
    <image class="bg-c" src="../../static/img/bg-c.png"></image>
    <view class="sign-up-title-c">
      <image
        class="bg1-l"
        src="../../static/img/left.png"
        mode="aspectFill"
      ></image>
      <image
        class="bg2-2"
        src="../../static/img/right.png"
        mode="aspectFill"
      ></image>
      <view class="sign-up-title-item"> 请选择你的年龄 </view>
      <view class="sign-up-title-tips"> 给你推荐年龄适配的Ta </view>
    </view>
    <view class="select-c">
      <my-select
        @valChange="handleDateChange"
        @curTime="curTime"
        :default-time="`${1930}-${12}-${1}`"
        mode="time"
        class="my-select"
      >
      </my-select>
    </view>
    <view class="to-btn" @click="stepToNext"> 下一步（3/7） </view>
    <!-- <ELM ref="elm" :msg="tipMsg"></ELM> -->
  </view>
</template>

<script>
import MySelect from "@/components/date/dateXZ.vue";
import { addMemberInfo } from "@/api/enroll";
import dayjs from "dayjs";

export default {
  components: {
    MySelect,
  },
  data() {
    return {
      selectSex: "man",
      bgColor: "rgba(0, 31, 63, 0)",
      isShow: false,
      value1: Number(new Date()),
      year: 1930,
      month: 12,
      day: 1,
      img: import.meta.env.VITE_BASE_URL,
      obj: {},
      tipMsg: "",
      locationerr: false,
    };
  },
  onLoad(options) {
    this.obj = JSON.parse(options.obj);
    console.log(this.obj);
    this.getCurrentTime();
  },
  onShow() {},
  methods: {
    left() {
      uni.navigateBack();
    },
    getCurrentTime() {
      var date = new Date(); //当前时间
      var year = date.getFullYear(); //返回指定日期的年份
      var month = this.repair(date.getMonth() + 1); //月
      var day = this.repair(date.getDate()); //日
      //当前时间
      var curTime = year + "-" + month + "-" + day;
      console.log(curTime);
      this.obj.birthday = curTime;
    },
    curTime(e) {
      this.obj.birthday = e.slice(0, 9);
      console.log(e, "-----------------");
    },
    repair(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
    handleDateChange(year, month, day) {
      this.year = year;
      this.month = month;
      this.day = day;
      this.obj.birthday = year + "-" + month + "-" + day;
      console.log(this.obj.birthday, "11111111111111");
    },
    async stepToNext() {
      const personal = uni.getStorageSync("userInfo");
      let obj = {
        id: personal.id,
        nid: personal.nid,
        birthday: dayjs(this.obj.birthday).format("YYYY-MM-DD"),
        nickName: personal.nickName,
      };
      const { code } = await addMemberInfo(obj);
      if (code !== 200) return;
      uni.redirectTo({
        url: "/pages/enroll/five",
      });
    },
  },
};
</script>

<style lang="scss">
.bg-c {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}

.u-nav-slot {
  margin-bottom: 115rpx;
  padding-left: 20rpx;
  z-index: 100;
}

.container {
  position: relative;
  width: 100vw;
  height: 100%;
  padding-top: 66rpx;
}

.sign-up-title-c {
  position: relative;
  width: 500rpx;
  height: 200rpx;
  margin: auto;
  margin-top: 52rpx;
  box-sizing: content-box;
  overflow: hidden;
  color: #333;

  .bg1-l {
    position: absolute;
    top: 0rpx;
    left: 20rpx;

    width: 95rpx;
    height: 85rpx;
  }

  .bg2-2 {
    position: absolute;
    top: 66rpx;
    right: 0;
    width: 83rpx;
    height: 60rpx;
  }

  .sign-up-title-item {
    font-size: 48rpx;
    top: 66rpx;
    font-weight: 800;
    font-family: "SourceHanSerifCN-Heavy";
    margin-top: 66rpx;
    text-align: center;
    color: rgba(45, 49, 50, 0.9);
  }

  .sign-up-title-tips {
    text-align: center;
    font-family: "PingFang SC-Regular, PingFang SC";
    margin-top: 24rpx;
    color: #666;
    font-size: 24rpx;
    font-weight: 400;
  }
}

.select-c {
  position: relative;
  padding: 20rpx 0;

  .picker-view {
    height: 450rpx;
    margin: auto;

    color: #434343;
  }

  picker-view-column {
    .item {
      width: 100%;
      text-align: center;
      line-height: 41px;
      height: 41px;
      color: #b8b8b8;
      font-weight: 400;
      font-family: "PingFang SC-Regular, PingFang SC";
    }

    .lldl {
      font-family: "PingFang SC-Bold, PingFang SC";
      color: rgba(67, 67, 67, 0.9);
      font-weight: 400;
    }
  }
}

.indicator-class {
  background: #eef5fe;
  z-index: -1;
}

.to-btn {
  width: 536rpx;
  height: 84rpx;
  background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
  border-radius: 42rpx 42rpx 42rpx 42rpx;
  text-align: center;
  line-height: 84rpx;
  margin: auto;
  color: rgba(65, 92, 158, 0.9);
  font-weight: 400;
  position: fixed;
  bottom: 15vh;
  left: 112rpx;
  font-size: 28rpx;
  font-family: "PingFang SC-Bold, PingFang SC";
}

.tips {
  margin: auto;
  text-align: center;
  margin-top: 30rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b7b7b7;
}
</style>
